<template>
    <div class="request">
        <el-button @click="handleGetAjax">发送ajax get请求</el-button>
        <el-button @click="handlePostAjax">发送ajax post请求</el-button>
        <el-button @click="handleJSONP">使用JSONP请求</el-button>
    </div>
</template>
<script>
import ajax from '@/utils/ajax'
import { JSONP } from '@/utils/JsonP'
export default {
    name: 'RequestName',
    data() {
        return {}
    },
    methods: {
        handleGetAjax() {
            ajax({
                url: '/test-get',
                params: { name: 'test' },
                progress(event, xhr) {
                    console.log('progress', event, xhr)
                },
            })
                .then((res) => {
                    console.log('ajax then: ', res)
                })
                .catch((error) => {
                    console.log('ajax catch: ', error)
                })
        },
        handlePostAjax() {
            ajax({
                url: '/test-post',
                method: 'POST',
                data: { name: 'test' },
                progress(event, xhr) {
                    console.log('progress', event, xhr)
                },
            })
                .then((res) => {
                    console.log('ajax then: ', res)
                })
                .catch((error) => {
                    console.log('ajax catch: ', error)
                })
        },
        handleJSONP() {
            JSONP('http://localhost:3000/jsonp', { test: '123' }, function (res) {
                console.log('JSONP', res)
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.request {
}
</style>
